<template>
	<view>
		<view class="userTop">
			<view class="disb aic">
				<view class="left disc jsb">
					<view class="color">{{'优秀业务员'}}</view>
					<view class="fz20 fw colorf">{{detail.name}}</view>
					<view class="tag disp">
<!--						<view class="tagList fz12">{{detail.remark}}</view>-->
        </view>
				</view>
				<image class="salesPic" :src="detail.avatar" mode=""></image>
			</view>
		</view>
		<view class="wrapper">
			<view class="introduce">
				<view class="tops disb aic">
					<view class="">业务员介绍</view>
					<view class="right disb aic">
						<image :src="imguser+'/minis/home/phone.png'" mode=""></image>
						<text>{{detail.mobile}}</text>
					</view>
				</view>
				<view class="illustrate fz12 color9" v-if="detail.remark==null"></view>
        <view class="illustrate fz12 color9" v-if="detail.remark!=null">{{detail.remark}}</view>
			</view>
			<view class="tit fw">咨询</view>
			<view class="product" v-for="item in detail.productRespList" :key="item.id"  @click="selcetProduct(item)">
				<view class="product-top disp aic">
					<view class="disp aic">
						<image class="product-Pic" :src="item.productImg" mode=""></image>
						<view class="fw">{{item.productName}}</view>
					</view>
					<view class="right disp">
						<view class="product-tabs fz10" v-for="value,index in item.productLable" :key="index">{{value}}</view>
					</view>
				</view>
				<view class="product-mess disb aic">
					<view class="fl1">
						<view class="fz18 color fw">
<!--              {{item.maxAmount}}-->
              <u--text mode="price" :text="item.maxAmount" size="17" color="#D34200" bold="true"></u--text>
            </view>
						<view class="fw fz16">{{ maxAmountLabel }}</view>
					</view>
					<view class="fl1">
						<view class="fz18 fw">{{item.annualInterest}}</view>
						<view class="fw fz16">{{ annualInterestLabel }}</view>
					</view>
				</view>
			</view>

			<view class="contactBtn disc jsa aic" @click="callPhone">
				<view class="disp aic colorf">
          <image :src="imguser+'/minis/home/phone.png'" mode=""></image>
					<text>联系业务员</text>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {salemanRecommend} from "../../api/index.js"
  import config from '@/common/config'
  import {getUserInfo} from "../../api/setting";
	export default {
		data() {
			return {
				id:null,
        imguser:config.baseImgUrl,
        userInfo:[],
        remark:'',
        maxAmountLabel: '',
        annualInterestLabel: '',
        loanPeriodLabel: '',
				detail:{}
			};
		},
    onShow(){
      //this.userInfo =  uni.getStorageSync('userInfo')
      // getUserInfo().then(res => { //取实时
      //   this.userInfo = res.data
      // })
      this.getWordings()
    },
		onLoad(option) {
			this.id = option.id
			this.getList()
		},
		methods:{
      // 获取缓存的文案配置
      getWordings() {
        const maxAmount = uni.getStorageSync('max_amount')
        if (maxAmount) {
          this.maxAmountLabel = maxAmount
        }

        const annualInterest = uni.getStorageSync('annual_interest')
        if (annualInterest) {
          this.annualInterestLabel = annualInterest
        }

        const loanPeriod = uni.getStorageSync('loan_period')
        if (loanPeriod) {
          this.loanPeriodLabel = loanPeriod
        }
      },
      selcetProduct(item){
        uni.navigateTo({
          url:`/pages/category/productDetail?id=${item.id}`
        })
        // if(this.userInfo.name && this.userInfo.age && this.userInfo.censusRegister && this.userInfo.registeredHk){
        //   uni.navigateTo({
        //     url:`/pages/category/productDetail?id=${item.id}`
        //   })}else{
        //   uni.navigateTo({
        //     url:"/pages/setting/setting"
        //   })
        // }
      },
			getList(){
				salemanRecommend({id:this.id}).then(res => {
					res.data.productRespList.forEach(v => {
						if(v.productLable){
							v.productLable = v.productLable.split(',')
						}
					})
					this.detail = res.data
				})
			},
			callPhone(){
				uni.makePhoneCall({
					phoneNumber:this.detail.mobile,
					success:function(){
						//uni.$u.toast('跳转中...');
					},
					fail() {
						//uni.$u.toast('拨打取消')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
.userTop{
	height: 250rpx;
	padding: 60rpx 20rpx;
	border-radius: 10rpx;
	background-color: #FF9800;
	.left{
		height: 175rpx;
		.tag{
			.tagList{
				line-height: 40rpx;
				border-radius: 4rpx;
				padding: 0 10rpx;
				margin: 0 10rpx;
				background-color: #bccbff;
				color: #1601f7;
			}
		}
	}
	.salesPic{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
	}
}
.wrapper{
  background-color: #f5f5f5;
	padding: 0 10rpx;
	position: relative;
	top: -100rpx;
	.introduce{
		padding: 24rpx;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0px 0px 20px #ccc;
		.tops{
			.right{
				image{
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}
		}
		.illustrate{
			line-height: 40rpx;
			padding: 10rpx 0;
		}
	}
	.tit{
		padding: 40rpx 0;
	}

	.product{
    background-color: rgba(255,255,255,1);
		margin-bottom: 40rpx;
    border-radius: 6rpx;
    padding: 20rpx;
		.product-top{
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f7f7f7;
			.product-Pic{
				width: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
				margin-right: 10rpx;
			}
			.product-tabs{
				background-color: #FFD591;
				color: #795548;
				margin: 0 10rpx;
				padding: 4rpx 8rpx;
				border-radius: 6rpx;
			}
		}
		.product-mess{
			padding: 20rpx 0;
			.applyBtn{
				width: 200rpx;
				line-height: 60rpx;
				border-radius: 40rpx;
				background-color: #ff0000;
			}
		}
		.productBar{
			padding: 20rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-shadow: 0px 0px 20px #ccc;
			margin: 10rpx 0;
		}
	}
	.contactBtn{
		width: 80%;
		height: 80rpx;
		background-color: #465feb;
		border-radius: 40rpx;
		margin: auto;
		image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}
	}
}
</style>
